<%@page contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> 
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="screen-orientation" content="portrait">
    <meta name="x5-orientation" content="portrait">
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <meta name="browsermode" content="application">
    <meta name="x5-page-mode" content="app">
    <meta name="msapplication-tap-highlight" content="no">
    <meta content="telephone=no" name="format-detection">
    <title>厘米秀-岛屿</title>
    <script>
        ;(function (win, lib) {
            var doc = win.document
            var docEl = doc.documentElement
            var metaEl = doc.querySelector('meta[name="viewport"]')
            var flexibleEl = doc.querySelector('meta[name="flexible"]')
            var dpr = 0
            var scale = 0
            var tid
            var flexible = lib.flexible || (lib.flexible = {})

            if (metaEl) {
                // console.warn('将根据已有的meta标签来设置缩放比例')
                var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/)
                if (match) {
                    scale = parseFloat(match[1])
                    dpr = parseInt(1 / scale)
                }
            } else if (flexibleEl) {
                var content = flexibleEl.getAttribute('content')
                if (content) {
                    var initialDpr = content.match(/initial\-dpr=([\d\.]+)/)
                    var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/)
                    if (initialDpr) {
                        dpr = parseFloat(initialDpr[1])
                        scale = parseFloat((1 / dpr).toFixed(2))
                    }
                    if (maximumDpr) {
                        dpr = parseFloat(maximumDpr[1])
                        scale = parseFloat((1 / dpr).toFixed(2))
                    }
                }
            }

            if (!dpr && !scale) {
                var isAndroid = win.navigator.appVersion.match(/android/gi)
                var isIPhone = win.navigator.appVersion.match(/iphone/gi)
                var devicePixelRatio = win.devicePixelRatio
                if (isIPhone) {
                    // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
                    if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
                        dpr = 3
                    } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) {
                        dpr = 2
                    } else {
                        dpr = 1
                    }
                } else {
                    // 其他设备下，仍旧使用1倍的方案
                    dpr = 1
                }
                scale = 1 / dpr
            }

            docEl.setAttribute('data-dpr', dpr)
            if (!metaEl) {
                metaEl = doc.createElement('meta')
                metaEl.setAttribute('name', 'viewport')
                metaEl.setAttribute(
                    'content',
                    'initial-scale=' +
                    scale +
                    ', maximum-scale=' +
                    scale +
                    ', minimum-scale=' +
                    scale +
                    ', user-scalable=no'
                )
                if (docEl.firstElementChild) {
                    docEl.firstElementChild.appendChild(metaEl)
                } else {
                    var wrap = doc.createElement('div')
                    wrap.appendChild(metaEl)
                    doc.write(wrap.innerHTML)
                }
            }

            function refreshRem() {
                var width = docEl.getBoundingClientRect().width
                if (width / dpr > 540) {
                    width = 540 * dpr
                }
                var rem = width * 0.133334
                docEl.style.fontSize = rem + 'px'
                flexible.rem = win.rem = rem
            }

            win.addEventListener(
                'resize',
                function () {
                    clearTimeout(tid)
                    tid = setTimeout(refreshRem, 300)
                },
                false
            )
            win.addEventListener(
                'pageshow',
                function (e) {
                    if (e.persisted) {
                        clearTimeout(tid)
                        tid = setTimeout(refreshRem, 300)
                    }
                },
                false
            )

            if (doc.readyState === 'complete') {
                doc.body.style.fontSize = 12 * dpr + 'px'
            } else {
                doc.addEventListener(
                    'DOMContentLoaded',
                    function (e) {
                        doc.body.style.fontSize = 12 * dpr + 'px'
                    },
                    false
                )
            }

            refreshRem()

            flexible.dpr = win.dpr = dpr
            flexible.refreshRem = refreshRem
            flexible.rem2px = function (d) {
                var val = parseFloat(d) * this.rem
                if (typeof d === 'string' && d.match(/rem$/)) {
                    val += 'px'
                }
                return val
            }
            flexible.px2rem = function (d) {
                var val = parseFloat(d) / this.rem
                if (typeof d === 'string' && d.match(/px$/)) {
                    val += 'rem'
                }
                return val
            }
        })(window, window['lib'] || (window['lib'] = {}))
    </script>
    <!--<link rel="stylesheet" href="./style.css">-->
    <style>
        body{font-family:"Microsoft YaHei", arial;background-color:#f2f2f2;max-width:750px;margin:0 auto !important}i{font-style:normal}.top-wrap{height:0.9rem}.top-wrap .inner{background-color:rgb(245 14 96);line-height:0.9rem;text-align:center;color:white;font-size:.4rem;width:100%;position:fixed;top:0;left:0;z-index:5}.content-wrap .img-wrap img{max-width:100%;position:relative;z-index:2}.content-wrap .img-wrap:after{content:'';background:linear-gradient(90deg, #f32a71, #f3403e) no-repeat, #fff;height:80%;width:140%;left:-20%;top:0;position:absolute;z-index:0;border-bottom-left-radius:50%;border-bottom-right-radius:50%}.content-wrap .img-wrap{display:block;padding:0.2rem;box-sizing:border-box;position:relative}.content-wrap{display:block;position:relative}.outer a +a{margin-top:.2rem}.outer a{display:block;text-decoration:none}.outer{margin:0 0.2rem}.item .font > span i{display:inline-block;width:.6rem;height:.3rem;background-image:url("https://sr.ffquan.cn/dtk_zhonghe/20201021/bu812fv6vrk961eop8n00.png");background-repeat:no-repeat;background-size:contain;background-position:center;position:relative;top:.05rem}.item .font > span{display:block;font-size:.3rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;height:.8rem;line-height:0.8rem;color:#333}.item .font{margin-left:33%}.item .pic img{width:100%}.item .pic{float:left;width:30%;border-radius:.1rem;overflow:hidden}.item{background-color:white;position:relative;overflow:hidden;padding:.1rem;border-radius:0.05rem}.tag i{background:white;margin-right:4px;color:#ff5351;float:left;padding:0 2px;border-radius:2px;font-size:90%}.tag{background:linear-gradient(90deg, #ff8873, #ff4f4f);display:inline-block;padding:2px;color:white}.price{overflow:hidden}.origin-price label{font-size:.2rem;color:#777;text-decoration:line-through;margin-left:.1rem}.origin-price{color:#fe3738;font-size:.3rem;display:inline-block;margin-top:.5rem}.count i{display:block}.count{float:right;text-align:center;background:linear-gradient(90deg,#f33,#ff3d81);box-shadow:0 0.02rem 0.08rem 0 rgba(255,57,93,.46);color:white;padding:4px;border-radius:5px}.loading{text-align:center;line-height:.8rem;color:#a4acb5}
    </style>
    <script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/vue/2.6.10/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/vue-lazyload/1.3.3/vue-lazyload.js"></script>
</head>
<body>
<div id="root">

    <div class="top-wrap">
        <div class="inner">
			厘米秀-岛屿
        </div>
    </div>
    <main class="content-wrap">
        <div class="img-wrap" align="center" >
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1603806545044&di=f09a8d2b49a277acb96a755e4bfee998&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fblog%2F201601%2F07%2F20160107193013_QzYBR.gif"/>
        </div>
        <div class="outer">
        
        <c:forEach items="${island}" var="lmx">
            <a  href="${lmx.islandactivity}" >
                <div class="item">
                    <span class="pic">
                        <img src=" ${lmx.img}"/>		
                    </span>
                    <section class="font" >
                        <span style="color:fuchsia;">
                           ${lmx.islandName}
                        </span>
                        <div>
							<span class="tag" style="display: block;"><i>时间:</i>${lmx.time}</span><br />                    
                            <span class="tag" style="display: block;"><i>小岛:</i>${lmx.info1}</span><br />
                            <span class="tag" style="display: block;"><i>小岛:</i>${lmx.info2}</span><br />
                            <span class="tag" style="display: block;"><i>小岛:</i>${lmx.info3}</span><br />
                            <span class="tag" style="display: block;"><i>小岛:</i>${lmx.info4}</span><br />
                        </div>
                        <div class="price" >
                            <span class="origin-price">
                                <label></label>
                        </div>
                    </section>
                </div>
            </a>
			
			</c:forEach>
        </div>	
    </main>
</div>
<div id="scrollerFooter" class="loading">
    加载完成
</div>
</body>
</html>
